<template>
  <div class="wrapper">
    <div id="app">
      <div class="top">
        <router-link to="/info" tag="div" class="topa">
          <img :src="data.avatar" alt="" />
          <div class="topb">
            <p style="font-size: 4.26667vw; margin-left: 10px">
              {{ data.nickname }}
            </p>
            <p class="p2"></p>
          </div>
          <div class="top_right" style="font-size: 3.2vw">去约课</div>
        </router-link>
        <div class="topb">
          <div class="diva">
            <p>0</p>
            <p>我的特色课</p>
            <p>已购特色课程的学习</p>
          </div>
          <div class="diva">
            <p>0</p>
            <p>我的特色课</p>
            <p>已购特色课程的学习</p>
          </div>
          <div class="diva">
            <p>0</p>
            <p>我的特色课</p>
            <p>已购特色课程的学习</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间分享区域 -->
    <div class="box">
      <div class="boxa">
        <img
          src=""
          alt=""
        />
        <div>
          <p>邀请好友注册APP，享多重好礼</p>
          <p>限时特惠，多邀多得</p>
        </div>
        <img src="@/assets/arrow-right.png" alt="" />
      </div>
    </div>
    <!-- 下面区域 -->
    <ul class="menu-box">
      <li>
        <p class="title">课程相关</p>
        <div class="item-box">
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>关注老师</p>
          </div>
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>我的收藏</p>
          </div>
        </div>
      </li>
      <li>
        <p class="title">订单相关</p>
        <div class="item-box">
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>课程订单</p>
          </div>
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>会员订单</p>
          </div>
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>约课订单</p>
          </div>
        </div>
      </li>
      <li>
        <p class="title">我的账户</p>
        <div class="item-box">
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>优惠券</p>
          </div>
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>学习卡</p>
          </div>
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>会员</p>
          </div>
        </div>
      </li>
      <li>
        <p class="title">自助服务</p>
        <div class="item-box">
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>我的消息</p>
          </div>
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>意见反馈</p>
          </div>
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>在线客服</p>
          </div>
          <div class="item">
            <img
              src=""
              alt=""
            />
            <p>设置</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getuser, getstart } from "../../../../request/http";

export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      data: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    getuser().then((res) => {
      console.log(res);
      this.data = res;
    });
    getstart().then((res) => {
      // console.log(res);
    });
  },
  mounted() {
    if (localStorage.getItem("adminToken")) {
      this.$router.push("/home/person");
    } else {
      this.$router.push("/login");
    }
  },
  methods: {},
};
</script>

<style lang='scss' scoped>
.wrapper{
  padding-bottom:1.33333rem;;
}
#app {
  position: relative;
  background: url(https://wap.365msmk.com/img/user_bg.ab306a5c.png) no-repeat
    top;
  background-size: 100%;
  padding: 0 4vw;
  height: 58vw;
}
.top {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92vw;
  background-color: #fff;
  box-shadow: 0 0 0.32rem 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 3.2vw 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.13333rem;
  border-radius: 1.33333vw;
  height: 46vw;
  > .topa {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 50%;
    > img {
      width: 15.73333vw;
      height: 15.73333vw;
      border-radius: 50%;
    }
    > .topb {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > .p2 {
        background: url()
          50% no-repeat;
        width: 4vw;
        height: 4.13333vw;
        height: 4.13333vw;
        background-size: 4vw 4.13333vw;
        margin-left: 5px;
      }
    }
    .top_right {
      color: white;
      position: absolute;
      right: 0;
      width: 14.8vw;
      height: 6.66667vw;
      border-top-left-radius: 2.66667vw;
      border-bottom-left-radius: 2.66667vw;
      background-color: #eb6100;
      text-align: center;
    }
  }
  > .topb {
    display: flex;
    justify-content: space-around;

    width: 100%;
    height: 50%;
    background: white;
    > .diva {
      font-size: 14px;
      width: 30%;
      text-align: center;
      > p {
        margin: 0;
        padding: 0;
      }
      > p:nth-child(1) {
        font-size: 25px;
        color: #eb6100;
      }
      > p:nth-child(3) {
        color: #b7b7b7;
      }
    }
  }
}
// 中间分享区域
.box {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 60px;
  position: relative;
  // background-color: red;
  box-sizing: border-box;
  > .boxa {
    bottom: 0px;
    position: absolute;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    height: 11.73333vw;
    background: linear-gradient(-90deg, #f2995a, #eb6100);
    border-radius: 5.86667vw;
    img {
      display: block;
      width: 5.33333vw;
      height: 4.8vw;
    }
    div {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0;
      margin-right: 30px;
      font-size: 70%;
      p {
        font-size: 3.2vw;
        color: #fff;
        line-height: 3.2vw;
      }
    }
  }
}
// 下面区域
.menu-box {
  width: 100%;
  padding: 0 4vw;
  background-color: #fff;
  box-sizing: border-box;
  > li {
    border-bottom: 1px solid #eee;
    > .title {
      font-family: PingFangSC-Medium;
      font-size: 4.26667vw;
      color: #333;
      line-height: 4.26667vw;
    }
    > .item-box {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      outline: none;
      > .item {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column;
        width: 25%;
        height: 16vw;
        text-align: center;
        p {
          margin-top: 2.66667vw;
          font-size: 3.2vw;
          color: #666;
          line-height: 3.2vw;
        }
        img {
          width:5.8vw;
          height: 5.6vw;
        }
      }
    }
  }
}
</style>
